<template>
  <div>
    <ZanTab :list="menus" :selectedId="selectedId" :componentId="'tab1'" @change="handleZanTabChange" height="45" :scroll="true" :fixed="true"/>
    <ZanLoadmore :loading="loading"/>
    <div class="lix-odl__list">
      <div class="lix-odl__list--item" v-for="(item, idx) in list" :key="idx" @click.stop="onClick" :data-id="item.id">
        <div class="cellheader">
          <div class="date">{{ item.order_time }}</div>
          <div class="state">{{ item.status_text }}</div>
        </div>
        <div class="lix-odl__celllist">
          <div class="lix-odl__item" v-for="(good, index) in item.goods" :key="index">
            <div class="content">
              <div class="left">
                <div class="logo">
                  <image :src="good.cover" />
                </div>
                <div class="info">
                  <div class="title">{{ good.name }}</div>
                  <div>{{ good.sku }}</div>
                </div>
              </div>
              <div class="right">
                <div class="price"><span>￥</span>{{ good.price }}</div>
                <div style="text-align: right">x{{ good.number }}</div>
              </div>
            </div>
            <div class="seperate"></div>
          </div>
        </div>
        <div class="cellfooter">
          共{{ item.goods.length }}件商品 应付金额：<span><span class="unit">￥</span>{{ item.amount }}</span>
        </div>
        <div class="btnlist">
          <!-- <button>取消订单</button> -->
          <!-- <button>修改信息</button> -->
          <button @click.stop="onClick" :data-id="item.id">立即付款</button>
        </div>
      </div>
    </div>
    <ZanLoadmore :nomore="noMore" :nodata="noData"/>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import ZanTab from '../../node_modules/mpvue-zanui/src/components/zan/tab';
import ZanLoadmore from '../../node_modules/mpvue-zanui/src/components/zan/loadmore';
import { ORDERLIST_GET_DATA } from '../store/mutation-types';

export default {
  components: {
    ZanTab,
    ZanLoadmore
  },
  data() {
    return {
      selectedId: null,
      menus: [
        {id: 0, type: 'all', title: '全部'},
        {id: 1, type: 'payment', title: '待付款'},
        {id: 2, type: 'receive', title: '待收货'},
        {id: 3, type: 'evaluate', title: '待评价'}
      ]
    };
  },
  watch: {
    selectedId() {
      console.log('selectedid 变化');
      console.log(this.selectedId);
      if (this.selectedId === null) {
        return;
      }
      this.destroyedState();
      this.getOrderList({
        page: 1,
        type: this.menus[this.selectedId].type
      })
        .then(() => {
          wx.stopPullDownRefresh();
        });
      console.log('切换tab 进行网络请求');
    }
  },
  computed: {
    ...mapGetters('orderlist', {
      list: 'list',
      loading: 'loading',
      hasNextPage: 'hasNextPage',
      noData: 'noData',
      currentPage: 'currentPage'
    })
  },
  onLoad(option) {
    this.destroyedState();
    console.log(option);
    this.changeType(option.type);
  },
  onUnload() {
    console.log('页面卸载');
    this.destroyedState();
    this.selectedId = null;
  },
  onPullDownRefresh() {
    if (this.selectedId === null) {
      return;
    }
    this.destroyedState();
    this.getOrderList({
      page: 1,
      type: this.menus[this.selectedId].type
    })
      .then(() => {
        wx.stopPullDownRefresh();
      });
  },
  onReachBottom() {
    if (this.hasNextPage) {
      this.getOrderList({
        page: this.currentPage + 1,
        type: this.menus[this.selectedId].type
      })
        .then(() => {
          wx.stopPullDownRefresh();
        });
    }
  },
  methods: {
    ...mapActions('orderlist', {
      'getOrderList': ORDERLIST_GET_DATA,
      'destroyedState': 'destroyedState'
    }),
    ...ZanTab.methods,
    handleZanTabChange(e) {
      console.log(e);
      this.selectedId = e.selectedId;
    },
    changeType(type) {
      switch (type) {
        case 'all':
          this.selectedId = 0;
          break;
        case 'needpay':
          this.selectedId = 1;
          break;
        case 'wait':
          this.selectedId = 2;
          break;
        case 'estimate':
          this.selectedId = 3;
          break;
      }
    },
    onClick(e) {
      const id = e.mp.currentTarget.dataset.id;
      wx.navigateTo({
        url: '/pages/order?id=' + id
      });
    }
  }
};
</script>

<style lang="scss">
@import "../theme-chalk/orderlist.scss";
page {
  background: #f5f5f5;
}
</style>